<template>
    <div class="container">
        <!-- 生成微信支付二维码 -->
        <div class="top">
            <div class="left">
                <span>订单提交成功，请尽快付款！订单号：</span>
                <b style="color:red;">{{orderDetail?.order_id}}</b>
            </div>
            <div class="right">
                <em>应付金额</em>
                <strong style="color:red;">&nbsp;{{orderDetail?.total_fee}}</strong>
                <em>元</em>
            </div>
        </div>
        <div class="center">
            <div class="payment">
                <div class="pw-box">
                    <div class="erwei" v-loading="qrLoading">
                        <img :src="payUrl" alt="">
                    </div>
                    <div class="notice">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wechat_pay"></use>
                        </svg>
                        <span>使用微信进行支付</span>
                    </div>
                </div>
                <div class="pw-sidebar">
                    <img src="https://storage.360buyimg.com/payment-assets/pc/icon/phone-bg.png" alt="">
                </div>
            </div>
            <div class="table">
                <el-descriptions title="订单信息" :column="3" border>
                    <el-descriptions-item class="paytable" label="创建时间" label-align="center" align="center">{{orderDetail?.create_time}}</el-descriptions-item>
                    <el-descriptions-item label="产品名称" label-align="center" align="center">{{orderDetail?.orderDetail[0].productName}}</el-descriptions-item>
                    <el-descriptions-item label="收件地址" label-align="center" align="center">{{orderDetail?.address}}</el-descriptions-item>
                    <el-descriptions-item class="paytable" label="购买数量" label-align="center" align="center">{{orderDetail?.orderDetail[0].quantity}}</el-descriptions-item>
                    <el-descriptions-item label="购买用户" label-align="center" align="center">{{orderDetail?.user_nickname}}</el-descriptions-item>
                    <el-descriptions-item label="手机号" label-align="center" align="center">{{orderDetail?.user_phone}}</el-descriptions-item>
                    <el-descriptions-item label="商品描述" label-align="center" align="center">{{orderDetail?.orderDetail[0].description}}</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>


<script setup>
import { useRoute,useRouter} from 'vue-router';
import * as api from "@/api/pay"
import { onMounted,onUnmounted,ref } from 'vue';
import { ElMessage } from 'element-plus';
import qr from "qrcode"

let route = useRoute()
let router = useRouter()
// 声明一个定时器
let timeout = null
// 声明一个数据变量
let orderDetail = ref()
// 声明一个变量接收二维码地址
let payUrl = ref('')
// 一个加载动画变量
let qrLoading = ref(false)
// 1、发起请求，根据query传递过来的order_id，获取订单详情
let {order_id} = route.query
let getOrder = async () => {
    // 开启加载动画
    qrLoading.value = true
    try{
        let res = await api.getOrderApi(order_id)
        console.log(res)
        // //订单状态Order_Status：订单状态：0未提交1提交成功2已经取消3无效订单4。交易关闭5退货
        //也就意味着订单状态为1的时候才能够发起支付
        orderDetail.value = res.data.data
        // 获取订单状态
        let {order_status} =res.data.data
        // 如果没有订单id
        if(!order_id){
            ElMessage({
                type:'error',
                message:'没有获取到订单id,5秒之后跳转到充值页'
            })
        }
        if(order_status === 1){
            // 先从本地查询这个订单有没有发起过支付
            let code_url = localStorage.getItem(order_id)
            if(code_url){
                // 这个订单已经发起过支付，可能用户没有支付
                console.log(code_url)
                // 3、需要将支付地址转化为二维码
                //使用qrcode，将支付地址变成二维码
                qr.toDataURL(code_url,(err,url)=>{
                    console.log(url)
                    if(err){
                        ElMessage.error(err.toString())
                    }
                    payUrl.value = url
                })
                // 关闭加载动画
                qrLoading.value = false
            }else{
                // 这个状态才可以支付
                try{
                    // 2、发起支付，提交订单id，后台会返回支付的地址给我们
                    let res = await api.paymentApi(order_id)
                    console.log(res)
                    // 因为同一个订单不能频繁发起支付，所以可以使用订单的id作为可以，支付的返回支付地址作为值，放到本地存储中
                    localStorage.setItem(order_id,res.data.code_url)
                    //使用qrcode，将支付地址变成二维码
                    qr.toDataURL(res.data.code_url,(err,url)=>{
                        console.log(url)
                        if(err){
                            ElMessage.error(err.toString())
                        }
                        payUrl.value = url
                    })
                    // 关闭加载动画
                    qrLoading.value = false
                }catch(e){
                    console.log(E)
                }
            }
            
        }else{
            switch(order_status){
                case 0:
                    ElMessage({
                        type:'error',
                        message:"订单未提交，5秒后返回充值页面"
                    })
                    break;
                case 2:
                    ElMessage({
                        type:'error',
                        message:"订单已取消，5秒后返回充值页面"
                    })
                    break;
                case 3:
                    ElMessage({
                        type:'error',
                        message:"无效订单，5秒后返回充值页面"
                    })
                    break;
                case 4:
                    ElMessage({
                        type:'error',
                        message:"交易关闭，5秒后返回充值页面"
                    })
                    
            }
            timeout = setTimeout(()=>{
                router.push('/vipManager/charge')
            },5000)
        }
    }catch(e){
        console.log(e)
    }
}
onMounted(()=>{
    getOrder()
})


// 使用ajax轮询的方式，来查询支付的状态
// 因为http的通信特性，服务端不能主动推送内容给客户端
// 轮询：设定一个定时器，间隔性的发送请求，询问服务器，数据是否变化

let poling = () => {
    let interval = setInterval(async () => {
        let res =await api.queryOrderStatus(order_id)
        console.log(res)
        console.log('345',res.data.state)
        if(res.data.state){
            // 支付成功，跳转到支付成功页面
            router.push('/pay/paySuccess')
            localStorage.removeItem(order_id)
        }
        console.log(res)
    },10444444000)
    return interval
}

let interval =poling()


// 页面卸载的时候，清除定时器
onUnmounted(()=>{
    if(timeout){
        clearTimeout(timeout)
    }
    clearInterval(interval)
})


</script>


<style lang="less" scoped>
.top{
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;

}
.center{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    background-color: #fff;
    padding: 12px 30px;
    box-shadow: 0 6px 32px rgb(0 0 0 / 13%);

    .payment{
        display: flex;
        justify-content: center;
        align-content: flex-start;

        .pw-box{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            .erwei>img{
                width: 300px !important;
                height: 300px !important;
            }
            .notice{
                display:flex;
                align-items: center;
            }
        }
        
        .pw-sidebar>img{
            height: 350px !important;
        }
    }
    
}





</style>